{layout "@projectLayout.latte"}
{block content}
<h1 class="block projectname">{$project['name']} > Diagram</h1>
<div id="chart">
	{var $levelCount = array();}
	{foreach $tasks as $task}
	{if isset($levelCount[$task['level']])}{var $levelCount[$task['level']]++ }{else}{var $levelCount[$task['level']]=0}{/if}
	<div id="block{$task[id]}" class="chartBlock block" data-detail="{link :Task:task, $task[id]}" style="top:{$levelCount[$task['level']]*85}px;left:{$task['level']*160}px;">
		<div class="chartCenter">{$task[name]}</div>
		<div class="chartStart">{$task[start]|date:"j.n.y"}</div>
		<div class="chartDeadline">{$task[deadline]|date:"j.n.y"}</div>
	</div>
	{/foreach}
</div>
{/block}
{block head}
<style type="text/css">
	#chart { position: relative; margin-top: 25px;}
	.chartBlock {
	/* WireIt */
	position: absolute;
	z-index: 5;
	/* Others */
	font-size: 10px;
	width: 100px;
	height: 50px;
	border: 1px solid #666;
	background-color: #242424;
	cursor: move;
	padding: 2px;
	margin: 2px;
}
.chartCenter {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	display: table;
	width: 96px;
	text-align: center;
}
.chartStart {
	position: absolute;
	left: 2px;
	bottom: 2px;
}
.chartDeadline {
	position: absolute;
	right: 2px;
	bottom: 2px;
}
</style>
<link rel="stylesheet" type="text/css" href="{$basePath}/WireIt-0.6.0-min/css/WireIt.css" /> 
<script src="{$basePath}/WireIt-0.6.0-min/lib/yui/utilities/utilities.js" type="text/javascript"></script>
<script type="text/javascript" src="{$basePath}/WireIt-0.6.0-min/build/wireit.js"></script> 

 

<script type="text/javascript">
	var wires = [];
	var repaintTimeout;
	window.onload = function() {
		{foreach $tasks as $task}
				var block{!$task[id]} = YAHOO.util.Dom.get('block{!$task[id]}');
				var terminal{!$task[id]} = [new WireIt.Terminal(block{!$task[id]}, { direction: [-1,0], offsetPosition: [-14,12], editable:false}),
					new WireIt.Terminal(block{!$task[id]}, { direction: [1,0], offsetPosition: [85,12], editable: false})];
				new WireIt.util.DD(terminal{!$task[id]},block{!$task[id]});
		{/foreach}
		{foreach $prerequisites as $prereq}
			{var $dependency = explode('-to-',$prereq['dependency_type'])}
			var t1 = {$dependency[0] == 'start' ? 0 : 1};
			var t2 = {$dependency[1] == 'start' ? 0 : 1};
			var w1 = new WireIt.BezierArrowWire(terminal{!$prereq[prerequisite_id]}[t1], terminal{!$prereq[task_id]}[t2], document.body);
			w1.redraw();
			wires.push(w1);
		{/foreach}
	
};

$(window).resize(function(){
	clearTimeout(repaintTimeout);
	repaintTimeout = setTimeout(repaintWires, 10);
});

function repaintWires(){
	var count = wires.length;
	for(i=0;i<count;i++){
		wires[i].redraw();
	}
}
</script>
{/block}